<template>
	<!-- 底部支付弹窗 -->
	<view class="xuanview">
		<u-popup v-model="dishow" mode="bottom" :closeable="false" width="100%" @close="close">
			<view class="zhiview">
				<text class="xintit">新用户限时<text class="zhe">2折</text>秒杀中，不定期恢复原价</text>
				<text class="zmiao">查询权限有效期12个月，提前锁定权限更实惠！</text>

				<view class="zhilist">
					<view class="zhiitem" :class="zhiinfo.id==item.id?'zhizctive':''" v-for="(item,index) in zhilist" :key="index" @click="getClickvip(item)">
						<image class="mxuan" src="/static/new/mxuan.png" />
						<view class="mxuanview">
							<image class="quan" src="/static/new/gou.png" />
							<image class="quans" src="/static/new/gous.png" />
							<text class="kaotit">{{item.title}}<text class="kaonum"></text></text>
							<view class="kaoright">
								<text class="jia">{{item.price}}元</text>
								<text class="yjia">原价{{item.oprice}}元</text>
							</view>
						</view>
					</view>
					<!-- <view class="zhiitem">
						<image class="mxuan" src="/static/new/mxuan.png" />
						
						<view class="mxuanview">
							<image class="cxiao" src="/static/new/cxiao.png" />
							<image class="quan" src="/static/new/gou.png" />
							<text class="kaotit">考点<text class="kaonum">1</text>次查询权限卡</text>
							<view class="kaoright">
								<text class="jia">25.9元</text>
								<text class="yjia">原价130元</text>
							</view>
						</view>
					</view>
					<view class="zhiitem">
						<image class="mxuan" src="/static/new/mxuan.png" />
						
						<view class="mxuanview">
							<image class="cxiao" src="/static/new/tui.png" />
							<image class="quan" src="/static/new/gou.png" />
							<text class="kaotit">考点<text class="kaonum">1</text>次查询权限卡</text>
							<view class="kaoright">
								<text class="jia">25.9元</text>
								<text class="yjia">原价130元</text>
							</view>
						</view>
					</view> -->
				</view>
				<image class="bxian" src="/static/new/bxian.png" />
				<view class="zonge">
					<view class="zongleft">
						<text class="zji">总计：<text class="zijinum">{{zhiinfo.price}}元</text></text>
						<text class="msha">名额有限，限时秒杀中~</text>
					</view>
					<view class="zongright" @click="shaiclose">
						<image class="gm" src="/static/new/gm.png" />
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	props: {
		dishow: {
			type: Boolean,
			default: false
		},
	
	},
	name: "PayPop",
	data() {
		return {
			ispayPop: true,
			animat: this.isanimate(),
			zhi:1,
			zhilist:[],
			zhiinfo:{}
		};
	},
	created(){
		this.getzhifu();//获取支付
	},
	methods: {
		async getzhifu(){//获取支付
			let res = await this.$u.api.getVipList({
				shop_id:uni.getStorageSync('shop_id')
			});
			this.zhilist = res
			this.zhiinfo = res[0]
		},
		async shaiclose() {
			console.log(this.zhiinfo)
			// 
			let res = await this.$u.api.addVipOrder({
				shop_id:uni.getStorageSync('shop_id'),
				vip_id:this.zhiinfo.id
			});
			if(res.is_pay == 0){
				//可以支付
				this.getpay(res)
			}
			this.$emit("shaiclose");
		},
		async getpay(data){
			let res = await this.$u.api.pay({
				shop_id:uni.getStorageSync('shop_id'),
				order_id:data.order_id
			});
			console.log(res)
		},
		reload() {
			this.$emit("reload");
		},
		manghe() {
			//我的盲盒
			uni.redirectTo({
				url: '/pages/my/index'
			})
		},
		getClickvip(item){
			this.zhiinfo = item
		},
		close(){
			this.$emit("shaiclose");
		}
	}
}
</script>

<style scoped lang="scss">
// 筛选弹窗开始
// 底部支付选择弹窗
.xuanview{
	/deep/.u-drawer-bottom{
		background-color: transparent;
	}
	.zhiview{
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 30rpx;
		min-height: 600rpx;
		// padding-bottom: 150rpx;
		.xintit{
			color: #333;
			font-size: 30rpx;
			font-weight: 500;
		}
		.zhe{
			font-size: 35rpx;
			font-weight: bold;
			color: #FF6430;
		}
		.zmiao{
			display: block;
			margin: 20rpx 0;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #32303E;
		}
		.zhilist{
			display: flex;
			flex-direction: column;
			.zhiitem{
				// height: 80rpx;
				
				position: relative;
				// padding: 15rpx 35rpx;
				display: flex;
				align-items: center;
				flex-direction: row;
				margin-bottom: 20rpx;
				.mxuanview{
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 10rpx 30rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(196,198,255,0.39);
					border-radius: 10rpx;
				}
				.cxiao{
					position: absolute;
					left: 0;
					width: 50rpx;
					height: 50rpx;
					z-index: 10;
					top: 0;
				}
				.mxuan{
					position: absolute;
					width: 100%;
					height: 100%;
					display: none;
				}

				.quan{
					width: 38rpx;
					height: 38rpx;
					display: inline-block;
				}
				.quans{
					width: 38rpx;
					height: 38rpx;
					display: none;
				}
				.kaotit{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #353535;
					display: inline-block;
					margin-left: 20rpx;
					.kaonum{
						font-size: 30rpx;
					}
				}
				.kaoright{
					margin-left: auto;
					display: flex;
					flex-direction: column;
					align-items: center;
					.jia{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #FF6430;
					}
					.yjia{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #727484;
						display: block;
						margin-top: 5rpx;
					}
				}
			}
			
			.zhizctive{
				.quan{
					width: 38rpx;
					height: 38rpx;
					display: none;
				}
				.quans{
					width: 38rpx;
					height: 38rpx;
					
					display: inline-block;
				}
				.kaotit{
					color: #FFFFFF;
				}
				.mxuanview{
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 10rpx 30rpx;
					background: none;
					box-shadow:none;
					border-radius: 10rpx;
				}
				.mxuan{
					position: absolute;
					width: 100%;
					height: 100%;
					display: inline-block;
				}
				.kaoright{
					.jia{
						color: #fff;
					}
					.yjia{
						color: #fff;
					}
				}
			}
		}
		.bxian{
			width: 100%;
			height: 7rpx;
			margin-top: 40rpx;
		}
		.zonge{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 50rpx;
			.zongleft{
				display: flex;
				flex-direction: column;
				.zji{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #32303E;
					.zijinum{
						font-size: 36rpx;
						color: #FF6430;
					}
				}
				.msha{
					display: inline-block;
					margin-top: 14rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #32303E;
				}
			}
			.zongright{
				width: 271rpx;
				height: 124rpx;
				margin-left: auto;
				position: relative;
				.gm{
					position: absolute;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
// 筛选弹窗结束
</style>
